/*
 思路：
 预备：  生成的过程
 定义数据： 和轮播图相关的数据
 图片和点击图片将要跳转的路径
 数据怎么组织？
 //一组数据  一组中每一项 图片和跳转的路径
 [{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"}]
 //JSON
 第一步：当页面加载完后，获取所要操作的节点对象
 第二步：根据数据动态生成轮播图以及控制按钮
 第三步：为每一个控制按钮添加一个鼠标浮动事件onmouseenter
 当前的按钮样式发生变化（acitve），其他的恢复原来样式
 对应的轮播图显示出来（active）,其他的隐藏
 第四步：开启自动轮播
 开启一个定时器，间接性的自动的切换轮播图
 第五步：为包含轮播区域容器lunBo添加一个鼠标浮动事件
 停止定时器（停止自动轮播）
 为包含轮播区域容器lunBo添加一个鼠标离开事件
 开启定时器
 */

var datas = [
    {imgSrc:"images/01.jpg",targetSrc:"https://sale.jd.com/act/N58wisuTGyW.html?cpdad=1DLSUE"},
    {imgSrc:"images/02.jpg",targetSrc:"https://sale.jd.com/act/mj8frBQAuDeCPo.html?cpdad=1DLSUE"},
    {imgSrc:"images/03.jpg",targetSrc:"https://sale.jd.com/act/PbDeHkZQcKjIRCtW.html?cpdad=1DLSUE"},
    {imgSrc:"images/04.jpg",targetSrc:"https://jr.jd.com/buy/index?from=jdsj_04_101182&cpdad=1DLSUE"},
    {imgSrc:"images/05.jpg",targetSrc:"https://haier.jd.com/?cpdad=1DLSUE"}
];

var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i<len;i++){
    var div = document.createElement("div");
    var li = document.createElement("li");
    if(i==0){  //默认第一项轮播项显示  对应的控制按钮被选中
        div.className = "item active";
        li.className = "active";
    }else{ //其他项隐藏  其他的控制按钮样式不改变
        div.className = "item";
        li.className = "";
    }

    div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
        '<img src="' + datas[i].imgSrc + '" />' +
        '</a>';

    li.innerHTML = i + 1;

    banner.appendChild(div);
    list.appendChild(li);
}

var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li");
var currentIndex = 0;//(控制按钮和轮播项共同的索引)
for(var i = 0,len = lis.length;i<len;i++){
    lis[i].index = i;
    lis[i].onmouseenter = function(){
        currentIndex = this.index;
        for(var j = 0;j<len;j++){
            lis[j].className = "";
            items[j].className = "item";
        }
        this.className = "active";
        items[this.index].className = "item active";
    }
}

var termId;  //全局变量
function autoPlay(){
    termId = setInterval(function(){
        currentIndex++;
        if(currentIndex==lis.length){
            currentIndex = 0;
        }
        lis[currentIndex].onmouseenter();
    },1000);
}

autoPlay();//打开页面自动轮播
//鼠标进入停止轮播
lunBo.onmouseenter = function(){
    clearInterval(termId);
}
//鼠标离开继续轮播
lunBo.onmouseleave = function(){
    autoPlay();
}